<template>
  <info-card :name="model.name" show-state show-btns>
    <template v-slot:btns>
      <el-button v-if="!editable" icon="el-icon-edit" type="text" @click="handleEdit">编辑</el-button>
      <el-button v-if="editable" type="text" icon="el-icon-circle-check" @click="handleSubmit">保存</el-button>
      <el-button v-if="editable" type="text" icon="el-icon-circle-close" @click="handleCancel">取消</el-button>
    </template>
    <template v-slot:state>
      <dict-tag :options="localDict.user_status" :value="model.status"/>
    </template>
    <template v-slot:content>
<!--      <model-form v-if="editable" ref="form" :id="id" method="edit" :visible.sync="editable" @ok="getModel"/>-->
<!--      <div v-else>-->
        <el-descriptions :class="['description', 'full']" :column="2"
                         :style="{width: model.avatar !== null ?'calc(100% - 150px)' : '100%', display: 'inline-block','vertical-align': 'top'}"
                         contentClassName="content" labelClassName="label">
          <el-descriptions-item label="用户账号">{{ model.code | formatInfo }}</el-descriptions-item>
          <el-descriptions-item label="用户类型">
            <dict-tag :options="localDict.user_type" :value="model.type" show-label/>
          </el-descriptions-item>
          <el-descriptions-item label="出生日期">{{ model.birthday | formatInfo }}</el-descriptions-item>
          <el-descriptions-item label="性别">
            <dict-tag :options="localDict.user_sex" :value="model.sex" show-label/>
          </el-descriptions-item>
          <el-descriptions-item label="手机号码">{{ model.mobile | formatInfo }}</el-descriptions-item>
          <el-descriptions-item label="电子邮件">{{ model.email | formatInfo }}</el-descriptions-item>
<!--          <el-descriptions-item label="注册时间">{{ model.createTime | formatInfo }}</el-descriptions-item>-->
<!--          <el-descriptions-item label="到期时间">{{ model.deadline | formatInfo }}</el-descriptions-item>-->
          <el-descriptions-item label="备注说明" span="2">{{ model.remark | formatInfo }}</el-descriptions-item>
        </el-descriptions>
<!--      </div>-->
    </template>
  </info-card>
</template>
<script>
import {dict, getOne} from "@/api/base";
import detailMixin from "../../../../mixins/detailMixin";

export default {
  name: 'UserInfoCard',
  dicts: [],
  props: {id: String},
  mixins: [detailMixin],
  components: {},
  data() {
    return {
      model: {},
      baseUrl: '/system/user',
      editable: false,
      formdata: {
        roleIds: []
      },
      formrules: {
        mobile: [
          {required: true, pattern: /^\d{8,15}$/, message: "请输入正确的手机号码", trigger: "blur"}
        ],
        email: [
          {required: true, type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"]}
        ],
      },
      localDict: {
        user_sex: [],
        user_type: [],
        user_status: []
      },
    }
  },
  created() {
    this.getLocalDict()
    this.getModel()
  },
  computed: {},
  methods: {
    getLocalDict() {
      this.getStaticData('system-user-sex').then(res => {
        this.localDict.user_sex = res.data
      })
      this.getStaticData('system-user-type').then(res => {
        this.localDict.user_type = res.data
      })
      this.getStaticData('system-user-status').then(res => {
        this.localDict.user_status = res.data
      })
      dict('/system/role/', {}).then(response => {
        this.localDict.role = response.data
      })
    },
    getModel() {
      // 获取表详细信息
      getOne(this.baseUrl, this.id).then(res => {
        this.model = res.data;
      });
    },
    handleEdit() {
      this.editable = true
    },
    handleSubmit() {
      this.$refs.form.handleSubmit()
      this.getModel()
    },
    // 取消按钮
    handleCancel() {
      this.editable = false;
      this.$refs.form.handleReset()
    },
  }
};
</script>
<style lang="scss" scoped>

</style>
